<template>
  <div class="testUi">
    <router-link to="/">tree</router-link>
    |
    <router-link to="/gisMap">map</router-link>
    |
    <router-link to="/threeD">3D scene</router-link>
    <div class="tree">
      <el-tree
          :data="data"
          node-key="id"
          show-checkbox
          :check-strictly="true"
          ref="tree"
          @check-change="handleClick"
          :default-expanded-keys="[1, 3]"
          :default-checked-keys="[3]"
          :props="defaultProps">
      </el-tree>
    </div>
    <div class="table">
      <el-button class="addBtn" type="primary" size="small" @click="update">编辑</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            border
            @selection-change="changeSelect"
            @select="selected"
            ref="multipleTable"
        >
          <el-table-column
              type="selection"
              width="40">
          </el-table-column>
          <el-table-column
              prop="date"
              label="日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="parcelNumber"
              label="宗地编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址">
          </el-table-column>
        </el-table>
    </div>
    <div class="formDialog">
      <el-button type="text" @click="dialogFormVisible  = true" >打开嵌套表单的 Dialog</el-button>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="1021px" class="formContent">
        <el-form :model="form" :inline="true" class="demo-form-inline">
          <el-form-item label="宗地编号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宗地面积" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="绿化率" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="容积率" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="建筑限高" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="土地使用年限" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="土地开始时间" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="土地开始时间" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" suffix-icon="xxx"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth" :inline="false" class="remark">
              <el-input type="textarea" v-model="form.name" autocomplete="off" suffix-icon="xxx" style="width:871px" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button  type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="js">
export default {
  name: 'Tree',
  data() {
    return {
      data: [],
      obj:{
        id: 1,
        label: '四川省',
        children: [{id: 2,label: '眉山市',
          children: [{
            id: 3,label: '东坡区'},
            {id: 4,label: '彭山区'},
            {id: 5,label: '仁寿县'},
            {id: 6,label: '洪雅县'},
            {id: 7,label: '丹宁县'},
            {id: 8,label: '青神县'}]
        }]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '100px',
      tableData: [{
        date: '2016-05-02',
        parcelNumber: '11',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        parcelNumber: '222',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        parcelNumber: '33',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        parcelNumber: '44',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      selectRows:[],
    };
  },
  created() {
    this.data.push(this.obj)
  },
  methods:{
    handleClick(data,checked, node){
      if(checked){
        this.$refs.tree.setCheckedNodes([data]);
        console.log(data)
        console.log(checked);
        console.log(node);
      }
    },
    changeSelect(val){
      if (val.length>1){
        this.$refs.multipleTable.clearSelection()   //清空选择
        this.$refs.multipleTable.toggleRowSelection(val.pop())   //选择点击的最后一个选项
      }else {
        this.selectRows = val.pop()  //将数据存起来
      }
    },
    selected(val,row){
      console.log(val)
      console.log(row)
    },
    update(){
      console.log(this.selectRows)
      if (!this.selectRows || this.selectRows.length<1){
        this.$alert('请选择一行数据', '提示', {
          confirmButtonText: '确定',})
      }else{
        this.dialogFormVisible = true
      }
    }
  }

};
</script>

<style scoped lang="scss">
.testUi{
  padding: 20px;
  > .tree{
    margin-top: 20px;
  }
  > .formDialog{
    >button{
      color: #333;
      &:hover{
        color: #409EFF;
      }
    }
    > .formContent> .el-dialog> .el-dialog__body> .demo-form-inline> .remark{
      width: 971px;
    }
  }
  .table{
    margin-top: 20px;
    > .addBtn{
      margin-bottom: 10px;
    }
  }

}
///deep/.el-radio__input {
//  position: relative;
//  left: 5px;
//}


</style>